<template>
<!-- 排班记录 -->
  <div style="padding:20px">
    <div slot="operation" class="Head_Top">
      <div class="Top_one">
        <el-button @click="addgroup" type="primary"
          >批量排班</el-button>
      </div>
      <div class="Top_two">
        <div class="Top_two_radio">
          <el-checkbox v-model="checked">已结束</el-checkbox>
          <el-checkbox v-model="checked1">已停用</el-checkbox>
        </div>
        <div class="Top_two_one">
          <el-input placeholder="请输入内容" v-model="listfrom.KeyWord">
            <i
              slot="suffix"
              @click="search"
              class="el-input__icon el-icon-search"
            ></i>
          </el-input>
        </div>
        <div class="Top_two_two1">
          <el-button
            icon="el-icon-refresh"
            size="small"
            class="refresh"
            @click="Toreload"
          ></el-button>
          <!-- <i class="iconfont icon-shuaxin" @click="Toreload"></i> -->
        </div>
      </div>
      <!-- <el-button @click="modal12 = true" type="primary">点击编辑</el-button> -->
    </div>
    <div slot="table">
      <table-cmp
        style="width:100%"
        class="table_cmp"
        :loading="loading"
        :table-data="tableData"
        :table-label="tableLabel"
        @handleButton="handleButton"
        @rowClick="rowClick"
        @cellClick="cellClick"
        @handleSortChange="handleSortChange"
        @handleSelectionChange="handleSelectionChange"
      ></table-cmp>
      <div style="text-align: right;">
        <el-pagination
          v-if="tatolpage > 10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listfrom.PageIndex"
          layout=" prev, pager, next"
          :total="tatolpage"
        >
        </el-pagination>
      </div>
    </div>
    <rosterre ref="rosterre"></rosterre>
    <manual ref="manual"></manual>
  </div>
</template>

<script>
var occupancyDisplay = {
  template: `<div>
            <el-button type="text" @click=stop(row) v-if="row.IsEdit&&row.Status==2" size="small">停用</el-button>
            <el-button type="text" @click=stop(row) v-if="row.IsEdit&&row.Status==3" size="small">启用</el-button>
            <el-button type="text" @click=remove(row) v-if="row.IsEdit&&row.Status==3" size="small">删除</el-button>
            <el-button type="text" @click=edit(row) v-if="row.IsEdit" size="small">编辑</el-button>
            <el-button type="text" @click=see(row) size="small">查看</el-button>
  
  </div>`,
  props: ['row'],
  created() {
  },
  methods: {
    remove(row) {

    },
    edit(row) {
      this.$emit('edit-detail', row);
      // console.log(this.row,'1111111');
    },
    see(row) {
      this.$emit('see-detail', row);
      // console.log(this.row,'1111111');
    }
  }
};
var that
import rosterre from "./dialog/rosterre";
import manual from "./dialog/ManualMakeUp";
export default {
  name: "",
  data() {
    return {
      modal12: false,
      loading: false,
      checked1: true,
      checked: true,
      tatolpage: 0,
      tableData: [],
      listfrom: {
        "Status": '',
        "KeyWord": '',
        "Status": '',
        "PageSize": 10,
        "PageIndex": 1
      },
      tableLabel: [
        { label: '状态', param: 'Status', width: '100', align: 'center', sortable: false, render: (row) => {
            if (row.Status == 0) {
              return '草稿'
            } else if (row.Status == 1) {
              return '待审批'
            } else if (row.Status == 2) {
              return '启用'
            } else if (row.Status == 3) {
              return '停用'
            }
          }
        },
        { label: '排班日期', param: 'ShiftDate', align: 'center', width: '100', sortable: false },
        { label: '排班类型', param: 'ShiftType', align: 'center', width: '100', render: (row) => {
          if (row.ShiftType == 1) {
            return '批量排班'
            } else if (row.ShiftType == 2) {
              return '手工排班'
            }
          }
        },
        { label: '开生效始日期', param: 'StartDate', align: 'center', width: '120', sortable: false },
        { label: '结束生效日期', param: 'EndDate', align: 'center', width: '120', sortable: false },
        { label: '使用部门', param: 'Organization', align: 'center', width: '100', sortable: false },
        { label: '覆盖职员', param: 'Staff', align: 'center', width: '100', sortable: false },
        { label: '描述', param: 'Desc', align: 'center' },
        { label: '操作', align: 'center', width: '300',
          component: occupancyDisplay, listeners: {
            'edit-detail'(row) {
              that.editDetail(row);
            },
            'see-detail'(row) {
              that.seeDetail(row);
            }
          }
        }
      ],
      fromData: {},
      columns: [],
    };
  },
  components: {
    rosterre,manual
  },
  watch: {
    "checked":function (params) {
      this.getlistdata()
    },
    "checked1":function (params) {
      this.getlistdata()
    },
     "$store.state.Humanmanage.QueryShiftRecord": function (data) {
      this.tatolpage = data.ReturnData.DataCount;
      let tableData = data.ReturnData.Data;
      var date = new Date();
      var newdate = date.toLocaleDateString();
      // console.log(newdate);
      tableData.forEach((item,index) => {
        if (this.isDateBetween(newdate,item.StartDate,item.EndDate)) {
          // console.log(item);
          item.IsEdit = false;
        } else {
          if (this.CompareDate(item.StartDate)) {
            item.IsEdit = true;
          } else {
            item.IsEdit = false;
          }
        }
      });
      this.tableData = tableData;
    },
  },
  methods: {
    // 添加组
    addgroup() {
      this.$refs.rosterre.formtype = 1;
      this.$refs.rosterre.dialogFormVisible = true;
    },
    seeDetail(row){
      if (row.ShiftType=='1') {
        this.$refs.rosterre.formtype = 3;
        this.$refs.rosterre.value = [row.StartDate,row.EndDate];
        this.$refs.rosterre.listfrom.Desc = row.Desc;
        this.$refs.rosterre.listfrom.ShiftId = row.ShiftId;
        if (row.StaffId) {
          // console.log(row.StaffId.split(","));
          this.$refs.rosterre.setkey(row.StaffId.split(","));
        }
        this.$refs.rosterre.dialogFormVisible = true;
      } else {
        this.$refs.rosterre.formtype = 3;
        console.log(row);
        this.$refs.manual.dialogFormVisible = true;
        
      }
    },
    editDetail(row) {
      if (row.ShiftType=='1') {
        this.$refs.rosterre.formtype = 2;
         this.$refs.rosterre.value = [row.StartDate,row.EndDate];
        this.$refs.rosterre.listfrom.Desc = row.Desc;
        this.$refs.rosterre.listfrom.ShiftId = row.ShiftId;
        this.$refs.rosterre.listfrom.Id = row.Id;
        if (row.StaffId) {
          console.log(row);
          this.$refs.rosterre.setkey(row.StaffId.split(","));
        }
        this.$refs.rosterre.dialogFormVisible = true;
        
      } else {
        
      }
    },
    getlistdata() {
      if (this.checked1) {
        this.listfrom.IsStop = '1'
      } else {
        this.listfrom.IsStop = ''
      }
      if (this.checked) {
        this.listfrom.IsOver = '1'
      } else {
        this.listfrom.IsOver = ''
      }
      let obj = {
        "MN": "QueryShiftRecord",
        "RequestId": 1,
        "UserId": 1,
        "DataContent": this.listfrom
      }
      this.MIX_send(obj);
    },
    rowClick(data) { },
    handleCurrentChange(data) {
      this.listfrom.PageIndex = data;
      this.getlistdata();
    },
    handleSizeChange(data) {
      // console.log(data,'handleSizeChange');
      this.listfrom.PageSize = data;
      this.getlistdata();
    },
    handleButton(data) { },
    cellClick(data) { },
    handleSortChange(data) { },
    handleSelectionChange(data) { },
    GetTableId(data) {
      console.log(data);
    },
    Toreload() {
      this.listfrom = {
        "Status": '',
        "KeyWord": '',
        "Status": '',
        "PageSize": 10,
        "PageIndex": 1
      }
      this.getlistdata();
    },
    search() {
      this.getlistdata();
    },
    // 表格上方筛选slot的事件回调
    add() {
      console.log("表格上方筛选slot的事件回调");
    },
    // 弹出框表单提交
    Commit() {
      // console.log(this.$refs.PopForm.value);
    },
    // 弹出框底部标签页组件事件的回调
    edit(val) {
      console.log(val);
    },
    CompareDate(d1) {
        return ((new Date(d1.replace(/-/g, "\/"))) > (new Date()));
    },
    //  判断时间是否在某个区间内
    isDateBetween(dateString, startDateString, endDateString) {
        var flag = false;
        var startFlag = (this.dateCompare(dateString, startDateString) < 1);
        var endFlag = (this.dateCompare(dateString, endDateString) > -1);
        if (startFlag && endFlag) {
            flag = true;
        }
        return flag;
    },
    dateCompare(dateString, compareDateString) {
        var dateTime = this.dateParse(dateString).getTime();
        var compareDateTime = this.dateParse(compareDateString).getTime();
        if (compareDateTime > dateTime) {
            return 1;
        } else if (compareDateTime == dateTime) {
            return 0;
        } else {
            return -1;
        }
    },
    dateParse(dateString) {
        var SEPARATOR_BAR = "-";
        var SEPARATOR_SLASH = "/";
        var SEPARATOR_DOT = ".";
        var dateArray;
        if (dateString.indexOf(SEPARATOR_BAR) > -1) {
            dateArray = dateString.split(SEPARATOR_BAR);
        } else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
            dateArray = dateString.split(SEPARATOR_SLASH);
        } else {
            dateArray = dateString.split(SEPARATOR_DOT);
        }
        return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    that = this;
    this.getlistdata();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { }
}
</script>

<style lang='less' scoped>
.Head_Top {
  width: 100%;
  height: 51px;
  // overflow: hidden;
  display: flex;
  justify-content: space-between;
  .Top_one {
    width: 350px;
  }
  .Top_two {
    // flex: 1;
    display: flex;
    .Top_two_two {
      padding: 10px;
    }
  }
  .Top_three {
    width: 50px;
  }
}
</style>